

<div class="LoginPanel">
    <ul class="nav nav-tabs">
        <li role="presentation" [class.active]="switchLoginAndSignin==0" (click)="switch(0)"><a href="javascript:void(0);">登录</a></li>
        <li role="presentation" [class.active]="switchLoginAndSignin==1" (click)="switch(1)"><a href="javascript:void(0);">注册</a></li>
    </ul>


    <div class="panel panel-primary" *ngIf="switchLoginAndSignin==0">
        <div class="panel-heading">登录</div>
        <div class="panel-body" (change)="validatorUser()" (input)="validatorUser()">
            <form class="form-horizontal" (ngSubmit)="onLogin()" #loginForm="ngForm">
                <div class="form-group">
                    <label class="col-sm-2 control-label">用户名</label>
                    <div class="col-sm-10">
                        <input type="text" pattern="[\x21-\x7e]*" [(ngModel)]="user.userName"
                               class="form-control" minlength="4" maxlength="20"
                               required  name="userName" placeholder="请输入用户名" ngModel>
                    </div>

                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">密码</label>
                    <div class="col-sm-10">
                        <input type="password" class="form-control"
                               minlength="6" maxlength="20"
                               [(ngModel)]="user.password" pattern="[\x21-\x7e]*" ngModel required
                               name="password" placeholder="请输入密码" >
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <span class="error-color" [hidden]="loginForm.form.untouched" [innerHTML]="getMessage"></span><br />
                        <button type="submit" id="loginSubmit" class="btn btn-primary" [disabled]="isAjax || !loginForm.form.valid">登录</button>
                    </div>
                </div>
            </form>
        </div>
    </div>


    <div class="panel panel-primary" *ngIf="switchLoginAndSignin==1">
        <div class="panel-heading">注册</div>
        <div class="panel-body" (change)="validatorRegister()" (input)="validatorRegister()">
            <form class="form-horizontal" (ngSubmit)="onSignin()" #siginForm="ngForm">
                <div class="form-group">

                    <label class="col-sm-3 control-label">用户名</label>
                    <div class="col-sm-9">
                        <input type="text" [(ngModel)]="register.userName"
                               class="form-control" name="userName"
                               minlength="4" maxlength="20"
                               placeholder="请输入用户名,最少4位，最多20位"
                               pattern="^[\x21-\x7e]*$" ngModel required>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">密码</label>
                    <div class="col-sm-9">
                        <input type="password" class="form-control"
                               [(ngModel)]="register.password"
                               minlength="6" maxlength="20"
                               name="passWord" placeholder="请输入密码"
                               pattern="^[\x21-\x7e]*$" ngModel required>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label">验证密码</label>
                    <div class="col-sm-9">
                        <input type="password" class="form-control"
                               [(ngModel)]="register.invalidPassword"
                               minlength="6" maxlength="20"
                               name="passWord2" placeholder="请输入验证密码"
                               [pattern]="register.password" ngModel required>
                    </div>
                </div>


                <div class="form-group">
                    <div class="col-sm-offset-3 col-sm-9">
                        <span class="error-color" [hidden]="siginForm.form.untouched" [innerHTML]="getMessage"></span><br />
                        <button type="submit" class="btn btn-primary" [disabled]="isAjax || !siginForm.form.valid">注册</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

</div>